<template>
    <div class="bankadd">
        <van-cell-group>
            <van-field v-model="bankCard" label="银行卡号" placeholder="请输入银行卡号" />
            <van-field v-model="bank" label="银行名称" placeholder="请输入银行名称" />
            <van-field v-model="openBank" label="开户行" placeholder="请输入开户行" />
            <van-field v-model="name" label="预留姓名" placeholder="请输入预留姓名" />
            <van-field v-model="mobile" label="预留电话" placeholder="请输入预留电话" />
        </van-cell-group>
        <div class="btn">
            <van-button :loading="loading" type="danger" size="large" @click="submit">提交</van-button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            loading:false,
            bankCard: '',
            bank: '',
            openBank: '',
            name: '',
            mobile: ''
        }
    },
    computed: {
        ...mapState(['openid']),
        urlApi() {
            return this.$route.params.id == 'none' ? this.$api.bankIncrease : this.$api.bankModify
        }
    },
    mounted(){
        this.$route.params.id != 'none' && this._get()
    },
    methods:{
        //获取银行卡详情
        async _get() {
            let { data: { code, data } } = await this.$http.get(this.$api.bankDetails,{
                id: this.$route.params.id,
                openid: this.openid
            
            })
            if (code === 0) {
                this.bankCard = data.number
                this.bank = data.bank
                this.openBank = data.address
                this.name = data.name
                this.mobile = data.phone
            }
        },
        submit() {
            let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/
            if(!this.bankCard || isNaN(this.bankCard)) {
                this.$toast('请正确填写银行卡号')
                return
            }
            if(!this.bank) {
                this.$toast('请填写银行名称')
                return
            }
            if(!this.openBank) {
                this.$toast('请填写开户行')
                return
            }
            if(!this.name) {
                this.$toast('请填写预留姓名')
                return
            }
            if(!this.mobile) {
                this.$toast('请填写预留电话')
                return
            }
            if(!mobile.test(this.mobile)) {
                this.$toast('请正确填写预留电话')
                return
            }
            this._submit()
        },
        async _submit(){
            let form = {
                number: this.bankCard,
                bank: this.bank,
                address: this.openBank,
                name: this.name,
                phone: this.mobile,
                id: this.$route.params.id,
                openid: this.openid
            }
            this.loading = true
            let { data: { code, data } } = await this.$http.post(this.urlApi,form)
            this.loading = false
            if (code === 0) {
                this.$toast(data)
                setTimeout(() => {
                    this.$router.go(-1)
                }, 1500)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .bankadd{
        .btn{
            margin: 2rem 0;
        }
    }
</style>